<template>
  <el-drawer v-model="drawer" title="导航菜单" direction="ltr" size="280px">
    <div class="sider-menu">
      <div
        class="sider-menu-item"
        v-for="(item, index) in menuList"
        :key="index"
        @click="handleMenuItemClick(item)"
      >
        <div class="sider-menu-item-icon">
          <i class="iconfont" :class="item.icon"></i>
        </div>
        <div class="sider-menu-item-text">
          {{ item.text }}
        </div>
      </div>
    </div>
  </el-drawer>
</template>
<script setup lang="js">
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

// 控制抽屉显示/隐藏
const drawer = ref(false)
const isNavigating = ref(false) // 防止重复点击

// 切换抽屉状态的方法
const toggleDrawer = () => {
  drawer.value = !drawer.value
}

// 打开抽屉
const openDrawer = () => {
  drawer.value = true
}

// 关闭抽屉
const closeDrawer = () => {
  drawer.value = false
}

// 菜单项点击处理
const handleMenuItemClick = async (item) => {
  // 防止重复点击
  if (isNavigating.value) {
    console.log('导航中，忽略点击')
    return
  }

  console.log('点击菜单项:', item.text)

  // 根据菜单项导航到对应路由
  if (item.route) {
    try {
      isNavigating.value = true

      // 关闭抽屉
      closeDrawer()

      // 等待抽屉关闭动画完成
      await new Promise((resolve) => setTimeout(resolve, 150))

      // 导航到目标路由
      await router.push(item.route)
      console.log('导航成功:', item.route)

      // 等待一个最小间隔，避免快速连续点击
      await new Promise((resolve) => setTimeout(resolve, 500))
    } catch (error) {
      console.error('路由导航失败:', error)
      // 重新打开抽屉，让用户能够再次尝试
      openDrawer()
    } finally {
      isNavigating.value = false
    }
  } else {
    // 关闭抽屉
    closeDrawer()
  }
}

// 菜单列表数据
const menuList = ref([
  {
    text: '首页',
    icon: 'icon-shouye',
    route: '/',
  },
  {
    text: 'Home',
    icon: 'icon-yonghuguanli',
    route: '/',
  },
  {
    text: 'About',
    icon: 'icon-yonghuguanli',
    route: '/about',
  },
  {
    text: 'ChildA-Home',
    icon: 'icon-quanxian',
    route: '/child-a/home',
  },
  {
    text: 'ChildA-About',
    icon: 'icon-xitongguanli',
    route: '/child-a/about',
  },
  {
    text: 'ChildB-Home',
    icon: 'icon-quanxian',
    route: '/child-b/home',
  },
  {
    text: 'ChildB-About',
    icon: 'icon-xitongguanli',
    route: '/child-b/about',
  },
])

// 暴露方法给父组件使用
defineExpose({
  toggleDrawer,
  openDrawer,
  closeDrawer,
})
</script>

<style scoped>
.sider-menu {
  padding: 0;
}

.sider-menu-item {
  display: flex;
  align-items: center;
  padding: 16px 20px;
  cursor: pointer;
  transition: all 0.3s;
  border-bottom: 1px solid #f0f0f0;
}

.sider-menu-item:hover {
  background-color: #f5f5f5;
}

.sider-menu-item:last-child {
  border-bottom: none;
}

.sider-menu-item-icon {
  margin-right: 12px;
  font-size: 18px;
  color: #666;
  width: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sider-menu-item-text {
  font-size: 14px;
  color: #333;
  font-weight: 500;
}

.sider-menu-item:hover .sider-menu-item-icon {
  color: #409eff;
}

.sider-menu-item:hover .sider-menu-item-text {
  color: #409eff;
}
</style>
